<template>
  <div class='app-container'>
    <el-card>
      <!-- 表单 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="目录名称">
          <el-input v-model="directoryApp" size="small"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="state" placeholder="请选择" size="small">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="doClear">清除</el-button>
          <el-button type="primary" @click="onSubmit" size="small">搜索</el-button>
        </el-form-item>
        <!-- 新增/修改框提示 -->
        <el-dialog :title="catalog" :visible.sync="dialogVisible" width="26%" v-if="dialogVisible">
          <el-form :model="addForm" ref="addForm">
            <el-form-item label="所属学科" style="margin-left: 10px ">
              <el-select v-model="addForm.subjectID" style="width: 300px;" size="large" placeholder="请选择">
                <el-option
                  v-for="(item, index) in this.subjectItems"
                  :key='index'
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="directoryName" label="目录名称" :rules="[{ required: true, message: '目录名称不能为空'}]">
              <el-input
                style="width: 300px; margin-left: 10px"
                v-model="addForm.directoryName"
                size="large"
                class="filter-item">
              </el-input>
            </el-form-item>
          </el-form>
          <span style="margin-left:170px" slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCatalog(addForm.id)">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 新增 -->
        <el-form-item class="filter-item fr">
          <el-button class="jumpBtn" type="text" @click="hJump" v-show="isShow">← 返回学科</el-button>
          <el-button
            class="addBtn"
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="hDirectory('')"
            >
            新增目录
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 数据总数 -->
      <el-alert
        v-if="alertText !== ''"
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon>
      </el-alert>
        <!-- 表格 -->
      <el-table
        :data="items"
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.subjectName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="directoryName"
          label="目录名称"
          width="180">
          <template slot-scope="scope">
            <span>{{scope.row.directoryName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者">
          <template slot-scope="scope">
            <span>{{scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          :formatter="dataFormat"
          >
        </el-table-column>
        <el-table-column
          prop="totals"
          label="面试题数量">
          <template slot-scope="scope">
            <span>{{scope.row.totals}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">已启用</span>
            <span v-if="scope.row.state === 0">已禁用</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.state === 1"
              @click="hChangeState(scope.row.id, 0)" size="small" type="text" >禁用</el-button>
              <el-button
              v-else
              @click="hChangeState(scope.row.id, 1)" size="small" type="text" >启用</el-button>
            <el-button type="text" size="small" :disabled="scope.row.state===1" @click.native="hDirectory(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="hDele(scope.row.id)" :disabled="scope.row.state===1 || scope.row.totals>0">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="hSizePage"
        @current-change="hChangePage"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :current-page="form.page"
        :page-size="form.pagesize"
        :page-sizes="[5, 10, 20, 50]"
        popper-class:10
        style="float:right;margin:10px 0">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { list, remove, add, update, changeState } from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects'
// 导入时间格式组件
import moment from 'moment'
export default {
  data () {
    return {
      isShow: true,
      catalog: '新增目录',
      dialogFormVisible: false,
      alertText: '',
      total: null,
      page: 1, // 页码为1
      pagesize: 10, // 每页条数
      subjectID: null,
      form: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        directoryName: null, // 目录名称
        state: null // 状态
      },
      addForm: {
        subjectID: null,
        directoryName: null
      },
      subjectItems: [],
      directoryApp: null,
      state: null,
      items: [],
      formInline: {
        user: '',
        region: ''
      },
      dialogVisible: false
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.name) {
      this.form.subjectID = this.$route.query.id
      this.isShow = true
    } else {
      this.isShow = false
    }
    this.getList()
  },
  methods: {
    indexMethod (index) {
      return index + 1
    },
    // 渲染页面
    async getList () {
      const paramsObj = {
        page: this.form.page,
        pagesize: this.form.pagesize,
        state: this.form.state,
        subjectID: this.form.subjectID,
        directoryName: this.form.directoryName
      }
      paramsObj.directoryName = this.directoryApp
      paramsObj.state = this.state
      try {
        const { data: res } = await list(paramsObj)
        console.log(res)
        this.items = res.items
        this.total = res.counts
        this.alertText = `共 ${this.total} 条记录`
      } catch (err) {
        console.log(err)
      }
    },
    // 表格时间格式化
    dataFormat (row, column) {
      // console.log(row.addDate)
      var date = row[column.property]
      // console.log(new Date(addTime))
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    },
    hChangePage (curPage) {
      this.form.page = curPage
      this.getList()
    },
    hSizePage (curPageSize) {
      console.log(curPageSize)
      this.form.pagesize = curPageSize
      this.form.page = 1
      this.getList()
    },
    // 搜索
    onSubmit () {
      this.page = 1
      this.getList()
    },
    // 清除
    doClear () {
      console.log(this.directoryApp)
      this.state = null
      this.directoryApp = null
      console.log(this.state)
    },
    // 删除功能
    async doDele (id) {
      try {
        await remove({ id })
        console.log(id)
        this.$message.success('删除成功')
        this.getList()
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    // 删除事件
    hDele (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDele(id)
        this.form.page = 1
        this.getList()
      }).catch(() => {
        this.$message.error('已取消该操作')
      })
    },
    async hChangeState (id, val) {
      try {
        const res = await changeState({ id: id, state: val })
        this.$message.success('操作成功')
        console.log(res)
        this.getList()
      } catch (error) {
        console.log(error)
      }
    },
    // 新增目录的参数
    buildNewParams () {
      const { subjectID, directoryName } = this.addForm
      const paramsNewObj = { subjectID, directoryName }
      return paramsNewObj
    },
    // 修改/新增目录的提示框
    hDirectory (row) {
      console.log(row)
      this.addForm.id = row.id
      if (row) {
        this.catalog = '修改目录'
        this.addForm.subjectID = row.subjectID
        this.addForm.directoryName = row.directoryName
      } else {
        this.catalog = '添加目录'
        this.addForm.subjectID = ''
        this.addForm.directoryName = ''
      }
      this.hSimple()
      this.dialogVisible = true
    },
    // 获取学科列表
    async hSimple () {
      try {
        const res = await simple()
        this.subjectItems = res.data
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    // 添加/修改目录
    addCatalog (id) {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (id) {
            this.hEdit(id)
          } else {
            this.hAdd()
          }
          this.dialogVisible = false
          this.form.page = 1
          this.getList()
        }
      })
    },
    async hAdd () {
      const buildNewParams = this.buildNewParams()
      try {
        const res = await add(buildNewParams)
        this.$message.success('添加成功')
        console.log(res)
      } catch (error) {
        this.$message.error('添加失败')
        console.log(error)
      }
    },
    async hEdit (id) {
      const buildNewParams = this.buildNewParams()
      buildNewParams.id = id
      try {
        const res = await update(buildNewParams)
        this.$message.success('修改成功')
        console.log(res)
      } catch (error) {
        this.$message.error('修改失败')
        console.log(error)
      }
    },
    // 跳转
    hJump () {
      this.$router.push('list')
    }
  }
}
</script>

<style scoped lang='scss'>
  .demo-form-inline {
    .filter-item {
      position: relative;
      right: 10px;
    }
  }
  .alert {
    margin: 10px 0px;
  }
</style>
